<template>
  <page-frame>
    <div class="order-management">
      <div class="toptitle">
        <div class="left">员工管理</div>
        <div class="right">
          <div class="btns">
            <el-button @click="addStaff" class="lightGreenBtn">新增员工</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="order-content">
          <div class="input">
            <el-row>
              <el-col style="width:130px">
                <div class="input-item">
                  <el-select style="width:90%!important;"  v-model="serviceId" @change="selectItem" @clear = "clearItem" clearable placeholder="选择条件">
                    <el-option
                      v-for="item in serviceList"
                      :label="item.serviceName"
                      :value="item.serviceId">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="input-item" v-show="serviceId==1">
                  <el-input
                    v-model="queryData.emNo"
                    style="width:81%!important"
                    placeholder="请填写员工工号"
                    @keyup.enter.native="query">
                  </el-input>
                </div>
                <div class="input-item" v-show="serviceId==2">
                  <el-input
                    v-model="queryData.emName"
                    style="width:81%!important"
                    placeholder="请填写员工姓名"
                    @keyup.enter.native="query">
                  </el-input>
                </div>
                <div class="input-item" v-show="serviceId==3">
                  <el-select style="width:81%!important" clearable @change="query" v-model="queryData.depts" multiple clearable placeholder="请选择部门">
                    <el-option
                      v-for="item in allDept"
                      :label="item.dept"
                      :value="item.deptId">
                    </el-option>
                  </el-select>
                </div>
                <div class="input-item" v-show="serviceId==4">
                  <el-select style="width:81%!important" clearable @change="query" v-model="queryData.roleIdList" multiple clearable placeholder="请选择职位">
                    <el-option
                      v-for="item in roleList"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <div class="input-item" v-show="serviceId==5">
                  <el-select  style="width:81%!important" clearable @change="query" v-model="queryData.type" clearable placeholder="请选择员工类型">
                    <el-option
                      v-for="item in typeList"
                      :label="item.typeName"
                      :value="item.typeId">
                    </el-option>
                  </el-select>
                </div>
                <div class="input-item" v-show="serviceId==6">
                  <el-select  style="width:81%!important" clearable @change="query" v-model="queryData.status" clearable placeholder="请选择员工状态">
                    <el-option label="在职" value="0"> </el-option>
                    <el-option label="离职" value="1"> </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                  <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="tabs">
            <el-table
              :data="tableData"
              border
              highlight-current-row
              @row-dblclick="handleCurrentChange"
              style="width: 100%">
              <el-table-column
                prop="emNo"
                label="工号"
              >
              </el-table-column>
              <el-table-column
                prop="emName"
                label="员工姓名"
              >
              </el-table-column>
              <el-table-column
                prop="phone"
                label="手机号"
              >
              </el-table-column>
              <el-table-column
                prop="dept"
                label="部门"
              >
              </el-table-column>
              <el-table-column
                prop="roleName"
                label="职位"
              >
              </el-table-column>
              <el-table-column
                prop="typeName"
                label="员工类型"
              >
              </el-table-column>
              <el-table-column
                prop="statusName"
                label="状态"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="operating"
                label="操作"
                width="150"
              >
                <template scope="scope">
                  <el-button v-show="scope.row.status==0" type="text" size="small" @click.stop="leaveCop(scope.row)">离职</el-button>
                  <el-button v-show="scope.row.status==0" type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--员工离职弹框-->
            <el-dialog title="员工离职" v-model="leave" size="tiny" :close-on-click-modal="false">
              <div class="input-item">
                <label>员工姓名</label>
                <el-input v-model="leaveName" disabled style="width:80%!important;"></el-input>
              </div>
              <div class="input-item">
                <label>员工类型</label>
                <el-input  v-model="typeName" disabled style="width:80%!important;"></el-input>
              </div>
              <div class="input-item">
                <label>离职日期</label>
                <el-date-picker
                  v-model="staffLeave.termdate"
                  type="date"
                  placeholder="选择离职日期"
                  style="width:80%!important;">
                </el-date-picker>
              </div>
              <div class="input-item">
                <label>温馨提示:</label>
                <el-input
                  class="remind"
                  value="系统将于离职日隔天凌晨关闭该员工账号"
                >
                </el-input>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="leave = false">取 消</el-button>
                <el-button type="primary" @click="leaveQuery">确 定</el-button>
              </span>
            </el-dialog>
            <div class="pagination">
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChangePage"
                  :current-page="currentPage"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
    </div>
  </page-frame>
</template>
<script>
  import staffApi from '../../service/corporation/staffApi';
  import roleApi from '../../service/corporation/roleApi';
  export default {
    methods: {
      init(){
        this.loadTableData(1,this.queryData);
        this.getRoleList();
        this.getAllDept();
      },
      /**
       * 选择项目
       */
      selectItem(){
        //清空选项
        this.queryData.emNo='';
        this.queryData.emName='';
        this.queryData.depts=[];
        this.queryData.roleIdList=[];
        this.queryData.type='';
        this.queryData.status="0";
      },
      /**
       * 清空按钮触发
       */
      clearItem(){
        this.selectItem();
      },
      /**
       * 加载表格数据
       */
      loadTableData(pageNum,data){
        let self = this;
        staffApi.listAllEmp(10,pageNum,data).then(
          (response) => {
            if(response.data.data.total==0){
              self.tableData = [];
            }else{
              self.tableData = response.data.data.list;
              self.total = response.data.data.total;
              for(let i=0;i<response.data.data.list.length;i++){
                //转换员工状态
                if(response.data.data.list[i].status==1){
                  self.tableData[i].statusName = "离职";
                }else if(response.data.data.list[i].status==0){
                  self.tableData[i].statusName = "在职";
                }
                //转换员工类型
                if(response.data.data.list[i].type==1){
                  self.tableData[i].typeName = "正式";
                }else if(response.data.data.list[i].type==2){
                  self.tableData[i].typeName = "外包";
                }else if(response.data.data.list[i].type==3){
                  self.tableData[i].typeName = "其他";
                }
              }
            }
          },
          (resposne) => {},
        );
      },
      /**
       * 获取角色列表
       */
      getRoleList(){
        let self = this;
        roleApi.getRoleList().then(
          (response) =>{
            self.roleList = response.data.data;
          },

          (response) =>{}
        );
      },
      /**
       * 获取部门列表
       */
      getAllDept(){
        let self = this;
        staffApi.getAllDept().then(
          (response) =>{
          self.allDept = response.data.data;
      },
        (response) =>{}
      );
      },
      /**
       * “离职”(操作)
       */
      leaveCop(row){
        let self = this;
        self.staffLeave.emId = row.emId;
        self.leaveName = row.emName;
        if(row.type==1){
          self.typeName = "正式";
        }else if(row.type == 2){
          self.typeName = "外包";
        }else if(row.type == 3){
          self.typeName = "其他";
        }
        self.leave = true;
      },
      /**
       * 确定按钮(离职弹框中)
       */
      leaveQuery(){
        let self = this;
        self.leave = false;
        staffApi.deleteEmpByEmpId(self.staffLeave.emId,self.staffLeave).then(
          (response)=>{
            this.$message({
              message: '离职操作成功!',
              type: 'success'
            });
            self.loadTableData(1,this.queryData);
          }
        );
      },
      /**
       * 新增员工
       */
      addStaff(){
        this.$router.push({name: 'staffInfo',params:{way:1,empId:-1}});
      },
      /**
       * 搜索
       */
      query(){
        this.loadTableData(1,this.queryData);
      },
      /**
       * 编辑
       */
      edit(row){
        this.$router.push({name: 'staffInfo',params:{way:2,empId:row.emId}});
      },

      handleCurrentChange(val) {
        this.$router.push({name: 'staffInfo',params:{way:0,empId:val.emId}});
      },
      /**
       * 分页相关函数
       */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.loadTableData(this.currentPage,this.queryData);
      },
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        leave:false,
        serviceId:1,
        leaveName:'',
        typeName:'',
        staffLeave:{
          emId:null,
          termdate:'',
        },
        queryData:{
//          dept:[],
          emName:'',
          emNo:'',
          depts:[],
          roleIdList:[],
          type:null,
          status:"0",
        },
        serviceList:[{
          serviceId: 1,
          serviceName: "工号",
        },{
          serviceId: 2,
          serviceName: "员工姓名",
        },{
          serviceId: 3,
          serviceName: "部门",
        },{
          serviceId: 4,
          serviceName: "职位",
        },{
          serviceId: 5,
          serviceName: "员工类型",
        },{
          serviceId: 6,
          serviceName: "状态",
        }],
        roleList:[{
          id:null,
          name:null,
        }],
        allDept:[{
          deptId:null,
          dept:null,
        }],
        typeList:[{
          typeName:"正式",
          typeId:1
        },{
          typeName:"外包",
          typeId:2
        },{
          typeName:"其他",
          typeId:3
        }],
        tableData: [],
        total:1,
        currentPage: 1,
      }
    }
  }
</script>
<style>

  .input .btns{
    float:none!important;
    display:inline-block;
  }
  .input input{
    display: inline-block;
  }
  .el-select {
    display: block;
    position: relative;
  }
  .query{
    margin-right:30px;
  }
  .el-dialog .input-item{
    margin:10px 0 15px 0;
  }
  .input-item .remind .el-input__inner{
    border:none;
    padding-left:0;
    padding-right:0;
    width:80%;
    font-weight:bold;
    margin-left:60px;
  }
</style>


